<template>
  <h1>购物车</h1>
  <button @click="addGoodsBtn">添加商品</button>
  <!-- 添加商品的弹窗 -->
  <showmsg v-if="addGoodsFlag" @cancelBtn="cancelAddBtn" @okBtn="okAddBtn"></showmsg>

  <!-- 编辑商品的弹窗 -->
  <showmsg v-if="editGoodsFlag" @cancelBtn="cancelEditBtn" @okBtn="okEditBtn"></showmsg>

  <!-- 删除商品的弹窗 -->
  <showmsg :isDel="true" v-if="delGoodsFlag" @cancelBtn="cancelDelBtn"
        @okBtn="okDelBtn"></showmsg>

  <!-- 商品列表 -->
  <ul class="list_ul">
    <li v-for="(item,index) in list" :key="index">
      商品名: {{ item.name }} --- 商品价格: {{ item.price }} --- <button @click="editBtn(index)">编辑</button>&emsp;
      <button @click="delBtn(index)">删除</button>
    </li>
  </ul>
</template>

<script>
// 导入
import goods from "./goods"
import showmsg from "./components/showmsg.vue";

export default {
  data(){
    return{
      list:[],
      addGoodsFlag:false,
      editGoodsFlag:false,
      editIndex:0,
      delGoodsFlag: false,
      delIndex:0
    };
  },
  methods:{
    // 10 删除确定的按钮
    async okDelBtn(){
      // 调用删除方法, 删除对应的数据
      await goods.delGoods(this.delIndex)
      // 获取最新的数据, 更新页面
      await this.getGoods()
      // 关闭删除弹框
      this.cancelDelBtn()
    },

    // 9 删除取消的按钮
    cancelDelBtn(){
      this.delGoodsFlag = false
    },

    // 8 删除商品的按钮
    delBtn(i){
      // 打开删除提醒弹窗
      this.delGoodsFlag = true
      // 储存现在点了哪一个商品的下标
      this.delIndex = i
    },

    // 7 编辑商品的确定按钮
    async okEditBtn(fromData){
      // console.log('确定',fromData);
      // 调用更新方法,修改数据
      await goods.updateGoods(this.editIndex,fromData)
      // 获取最新的数据,更新页面
      await this.getGoods()
      // 关闭弹窗
      this.editGoodsFlag = false
    },

    // 6 编辑商品的取消按钮
    cancelEditBtn(){
      this.editGoodsFlag = false
    },

    // 5 编辑商品的按钮
    editBtn(i){
      // 打开编辑器弹窗
      this.editGoodsFlag = true
      // 储存现在点了哪一个商品的下标
      this.editIndex = i
    },

    // 4 添加商品的确定按钮
    async okAddBtn(goodsInof){
      await goods.createGoods(goodsInof)
      await this.getGoods()
      // await console.log(goodsInof);
      this.addGoodsFlag = false
    },

    // 3 添加商品的取消按钮
    cancelAddBtn(){
      this.addGoodsFlag = false
    },

    // 2 添加商品
    addGoodsBtn(){
      // console.log('点击添加商品');
      this.addGoodsFlag = true
    },

    // 1 获取商品
    async getGoods() {
      this.list = await goods.getGoods()
      console.log(this.list)
    }
  },
  mounted(){
    this.getGoods()
  },
  components:{
    showmsg
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
}
html,body,#app{
  width: 100%;
  height: 100%;
}
</style>